<template>
  <div class="manualUpload">
    <el-upload
      ref="upload"
      multiple
      :auto-upload="true"
      :on-change="handleChange"
      action=""
      :file-list="fileList"
      :on-remove="handleRemove"
      :http-request="uploadSectionFile"
      :limit="numLimit"
    > 
      <!-- <template v-if="imageUrl">
        
        <i class="el-icon-plus"></i>
      </template> -->
      <el-button slot="trigger" class="upload_file">+</el-button>
    </el-upload>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: [],
      fileListV: [],
      dialogVisible: false,
      showImageUrl: ''
    };
  },
  props: ['numLimit', 'typeLimit', 'sizeLimit', 'imageUrl'],
  computed: {
    listType() {
      if(this.imageUrl) {
        return 'picture-card	'
      } else {
        return 'text'
      }
    },
  },
  watch: {
    imageUrl: {
      handler: function (val) {
        if (val) {
          this.showImageUrl = val
        }
      },
      immediate: true
    }
  },
  methods: {
    handleChange(file, fileList) {
      let tempList = []; //可以上传的文件
      for (let i = 0; i < fileList.length; i++) {
        let canUpload = true; //是否可以上传
        let fileName = fileList[i].name;
        // 文件大小判断  默认2M 单位M
        let size = fileList[i].size / 1024 / 1024 < this.sizeLimit || 2;

        let pos = fileName.lastIndexOf(".");
        let lastName = fileName.substring(pos, fileName.length);
        if (!this.typeLimit.includes(lastName)) {

          this.$message({
            message: `文件格式只能是${this.typeLimit}`,
            type: 'warning'
          });
          canUpload = false
        } 

        if (!size) {
          this.$message({
            message: `文件格式不能超过${this.sizeLimit || 2}MB`,
            type: 'warning'
          });
          canUpload = false
        }
        if (canUpload) {
          tempList.push(fileList[i]);
        }
      }
      this.fileListV.splice(0, this.fileListV.length, ...tempList);

      fileList.splice(0, fileList.length, ...tempList);

      this.$emit('change', this.fileListV)
      return;
    },
    handleRemove(file, fileList) {
      this.fileListV = fileList;
    },
    uploadSectionFile(params) {
    },
    clearFiles () {
      this.$refs['upload'].clearFiles()
    }

  },
};
</script>

<style lang='less'>
.manualUpload {
  .upload_file {
    width: 100px;
    height: 100px;
    font-size: 30px;
    color: #b5b5b5;
    background: #fbfdff;
    border: 1px dashed #c0ccda;
  }
}
</style>